<template>
  <div>
    <TableSearch :current-page="params.currentPage" :page-size="params.pageSize" :total="total_"
      @current-change="currentChange">
      <template #search>
        <el-form ref="formRef" :model="form" label-width="120px">
          <el-form-item label="基金类型:">
            <div class="flex items-center">
              <el-checkbox-group v-model="form.ft">
                <el-checkbox-button v-for="(name, pinyin) in FTS" :key="pinyin" :label="pinyin" :name="pinyin">
                  {{ name }}</el-checkbox-button>
              </el-checkbox-group>
              <el-button class="ml-2" type="text" @click="form.ft = []">重置</el-button>
            </div>
          </el-form-item>
          <el-form-item label="基金业绩:">
            <div class="flex items-center">
              <el-radio v-model="form.rsunit" v-for="(label, unit) in RsUnit" :key="label" :label="unit">{{ label
              }}</el-radio>
              <el-button @click="form.rsunit = null" type="text" class="mr-2">重置</el-button>
            </div>
            <div v-show="form.rsunit !== null">
              <el-radio v-model="form.rsrank" v-for="(label, rank) in RsRank" :key="label" :label="rank">{{ label
              }}</el-radio>
            </div>
          </el-form-item>
          <el-form-item label="基金主题:">
            <div class="tp-options">
              <div>
                <el-check-tag class="mr-2" v-for="tp in tpsOptions.slice(0, limit)" :key="tp[0]" effect="plain"
                  type="info" :checked="form.tp.includes(tp[0])" @click="toggleTag(tp[0])">{{ tp[1] }}</el-check-tag>
                <el-button type="text" @click="isShowMore = !isShowMore">更多
                  <i :class="{
                    'el-icon-arrow-down': !isShowMore,
                    'el-icon-arrow-up': isShowMore,
                  }" />
                </el-button>
                <el-button class="ml-2" type="text" @click="form.tp = []">重置</el-button>
              </div>
              <div v-show="isShowMore">
                <el-check-tag class="mr-2" v-for="tp in tpsOptions.slice(limit)" :key="tp[0]" effect="plain" type="info"
                  :checked="form.tp.includes(tp[0])" @click="toggleTag(tp[0])">{{ tp[1] }}</el-check-tag>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </template>
      <el-table row-key="code" v-loading="loading" :data="funds" style="width: 100%" table-layout="fixed"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="rowSelectable" />
        <el-table-column prop="name" label="基金名称|代码" align="left" header-align="left">
          <template #default="{ row: { name, code } }">
            <div>
              <el-button type="text" @click="toDetail(code)">{{
                name
              }}</el-button>
              <p class="text-gray-400">{{ code }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="基金类型" width="180" align="center" />
        <el-table-column prop="rate" label="净值|日增长率" width="180" align="center" sortable>
          <template #default="{ row: { netv, rate, date } }">
            <div>
              <span class="font-bold">{{ netv }}</span> (<rate-text :value="rate"></rate-text>)
            </div>
            <span class="text-gray-400 text-sm">日期: {{ date.replace(/\d{4}\-/, "") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="w1" label="近1周" width="100" align="center" sortable>
          <template #default="{ row: { w1 } }">
            <rate-text :value="w1"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m1" label="近1月" width="100" align="center" sortable>
          <template #default="{ row: { m1 } }">
            <rate-text :value="m1"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m3" label="近3月" width="100" align="center" sortable>
          <template #default="{ row: { m3 } }">
            <rate-text :value="m3"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="m6" label="近6月" width="100" align="center" sortable>
          <template #default="{ row: { m6 } }">
            <rate-text :value="m6"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="yt" label="今年来" width="100" align="center" sortable>
          <template #default="{ row: { yt } }">
            <rate-text :value="yt"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y1" label="近1年" width="100" align="center" sortable>
          <template #default="{ row: { y1 } }">
            <rate-text :value="y1"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y2" label="近2年" width="100" align="center" sortable>
          <template #default="{ row: { y2 } }">
            <rate-text :value="y2"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="y3" label="近3年" width="100" align="center" sortable>
          <template #default="{ row: { y3 } }">
            <rate-text :value="y3"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="fn" label="成立来" width="100" align="center" sortable>
          <template #default="{ row: { fn } }">
            <rate-text :value="fn" :per="false"></rate-text>
          </template>
        </el-table-column>
        <el-table-column prop="mixed2" label="手续费|购买起点" width="180" align="center">
          <template #default="{ row: { charge, min } }">
            <span class="">{{ charge }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>{{ min }}元</span>
          </template>
        </el-table-column>
      </el-table>
    </TableSearch>
    
    <CompareDrawer :show="drawer" @hide="drawer = false" :data="selection" />
  </div>
</template>

<script lang="ts" setup>
import TableSearch from "/@/components/TableSearch/index.vue";
import CompareDrawer from "/@/views/DaoGou/_Components/CompareDrawer.vue";
import { useRouter } from "vue-router";
import { ref, reactive, computed, watch } from "vue";
import {
  filterFund,
  FilterFundParam,
  FilterFundRes,
  FTS,
  RsUnit,
  RsRank,
  TPS,
} from "/@/api/fund/index";

defineExpose({ FTS, RsUnit, RsRank });
const router = useRouter();
const drawer = ref(false);
const selection = ref<any>([]);
const funds = ref<FilterFundRes[]>([]);
const isShowMore = ref(false);
const limit = ref(10);
const loading = ref(false);
const total_ = ref(0);
const form = reactive<{
  ft: string[];
  tp: string[];
  rsunit: string | null;
  rsrank: string;
}>({
  ft: [],
  rsunit: null,
  rsrank: "100",
  tp: [],
});
const params = reactive<FilterFundParam>({
  pageSize: 10,
  currentPage: 1,
  ft: computed(() => {
    if (form.ft.length > 0) {
      return form.ft.join(",");
    }
  }),
  rs: computed(() => {
    if (form.rsunit) {
      return `${form.rsunit},${form.rsrank}`;
    }
  }),
  tp: computed(() => {
    if (form.tp.length > 0) {
      return form.tp.join(",");
    }
  }),
});
const tpsOptions = computed(() => {
  return Object.entries(TPS);
});

const getList = async () => {
  loading.value = true;
  try {
    const {
      data: {
        Data: { datas, total },
      },
    } = await filterFund(params);
    funds.value = datas;
    total_.value = total;
  } finally {
    loading.value = false;
  }
};

const toggleTag = (tp: string) => {
  if (form.tp.includes(tp)) {
    form.tp.splice(form.tp.indexOf(tp), 1);
  } else {
    form.tp.push(tp);
  }
};

const currentChange = (page: number) => {
  params.currentPage = page;
  getList();
};

const handleSelectionChange = (v: any[]) => {
  if (v.length > selection.value.length) {
    drawer.value = true;
  }
  if (v.length === 0) {
    drawer.value = false;
  }
  selection.value = v;
};
const rowSelectable = (row: FilterFundRes) => {
  return selection.value.length < 5 || selection.value.includes(row);
};

const toDetail = (code: string) => {
  router.push({ name: "Detail", params: { code } });
};

watch(
  form,
  () => {
    params.currentPage = 1;
    getList();
  },
  { deep: true }
);

getList();
</script>

<style lang="postcss" scoped>
.tp-options {
  position: relative;
}

::v-deep(.el-table__header-wrapper) .el-checkbox {
  display: none;
}
</style>
